<div class="row is-centered align-center">
  <div class="column small-12 large-8 xlarge-6">
    <div class="sub-title has-number">
      <span class="text">Out of the Box Features</span>
    </div>
    <h2 class="title-2 has-big-margin">Make your app as consistent and easy to develop as possible</h2>
  </div>
</div>

<ul class="benefits-list">
  <li class="item">
    <div class="row">
      <div class="column small-12 large-offset-1 large-7 content">
        <h3 class="title-3">Pre-set UI</h3>
        <p class="description">
          Do you want a standardized UI for your app which is easy to use and configure? Luigi comes with
          an out-of-the-box L-shaped shell bar with a variety of different menus, dropdowns and switchers.
          The navigation built with <a target="_blank" rel="noopener noreferrer"
            href="https://sap.github.io/fundamental-styles/">Fundamental Styles</a> allows all your micro frontends to
          be embedded in a
          consistent UI. Learn more about Luigi navigation <a
            href="https://docs.luigi-project.io/docs/navigation-configuration">here</a>.
        </p>
      </div>
      <div class="column small-12 large-3 image">
        <img src="/assets/img/presetUI.svg" alt="Luigi - Micro Frontend Framework - Pre-set UI" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column small-12 large-7 content">
        <h3 class="title-3">Responsive design</h3>
        <p class="description">
          Luigi can help you quickly adapt your application to render well on a variety
          of devices and automatically scale the content and elements to match the screen size
          on which it is viewed. You can create a responsive app in two simple steps.
          Find out more <a href="https://docs.luigi-project.io/docs/luigi-ux-features">here</a>.
        </p>
      </div>
      <div class="column small-12 large-offset-1 large-3 image">
        <img src="/assets/img/responsivedevices.svg" alt="Luigi - Micro Frontend Framework - Responsive design" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column small-12 large-offset-1 large-7 content">
        <h3 class="title-3">Security/ID provider abstraction​</h3>
        <p class="description">
          Security is an important feature, so Luigi has simplified the process
          of authenticating users with a unique login password. Luigi Core provides
          ready-to-use <a href="https://docs.luigi-project.io/docs/authorization-configuration">plugins</a> for OpenID
          Connect and OAuth2. We also describe how to use
          <a href="https://docs.luigi-project.io/docs/advanced-scenarios">Google Cloud Identity</a> with Luigi or set up
          your own
          <a
            href="https://docs.luigi-project.io/docs/authorization-configuration/?section=custom-authorization-provider">custom
            authorization provider</a>.
        </p>
      </div>
      <div class="column small-12 large-3 image">
        <img src="/assets/img/security_ID.svg" alt="Luigi - Micro Frontend Framework - Security/ID" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column small-12 large-7 content">
        <h3 class="title-3">Role-based visibility restrictions</h3>
        <p class="description">
          Another way to use Luigi's <a
            href="https://docs.luigi-project.io/docs/authorization-configuration">authorization</a>
          and Core/Client API features is to make
          certain parts of your application only visible to some users. You can show a different
          view to admins and regular users, for example. This allows for more flexibility and
          security in your app.
        </p>
      </div>
      <div class="column small-12 large-offset-1 large-3 image">
        <img src="/assets/img/role-based.svg"
          alt="Luigi - Micro Frontend Framework - Role-based visibility restrictions" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column large-offset-1 small-12 large-7 content">
        <h3 class="title-3">Notification management​</h3>
        <p class="description">
          Luigi allows you to set up notifications and alerts for your application.
          The alerts are displayed in the main app, which means that you save time and effort by
          developing them globally, and they all have a consistent user-friendly look. Find out
          more about alerts <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showalert">here</a>.
          Notifications can also be displayed by using the
          <a href="https://docs.luigi-project.io/docs/navigation-parameters-reference/?section=badgecounter">badge
            counter</a>
          for top navigation items.
        </p>
      </div>
      <div class="column small-12 large-3 image">
        <img src="/assets/img/notification.svg" alt="Luigi - Micro Frontend Framework - Notification management" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column small-12 large-7 content">
        <h3 class="title-3">Form- and modal management​​</h3>
        <p class="description">
          Besides alerts, you can also add input forms, messages, and modals via your Luigi configuration.
          Modals are designed to look like a part of the Luigi Core app, but receive data from the micro frontend.
          Thus, your app looks consistent and not like a patchwork of different micro frontends. For more information
          check out the <a href="https://docs.luigi-project.io/docs/luigi-core-api/?section=showconfirmationmodal">Luigi
            Core</a>
          and <a href="https://docs.luigi-project.io/docs/luigi-client-api/?section=showconfirmationmodal">Luigi
            Client</a> API documentation.
        </p>
      </div>
      <div class="column  small-12 large-offset-1 large-3 image">
        <img src="/assets/img/form-modal.svg" alt="Luigi - Micro Frontend Framework - Form- and modal managementc" />
      </div>
    </div>
  </li>

  <li class="item">
    <div class="row">
      <div class="column small-12 large-offset-1 large-7 content">
        <h3 class="title-3">Multi language ​support​</h3>
        <p class="description">
          Offering your app in different languages allows you to reach more people.
          Luigi is the only micro frontend framework which also offers localization and
          translation features. For more information, refer to our localization example
          <a href="https://docs.luigi-project.io/docs/i18n/?section=internationalization-i18n">here</a>.
        </p>
      </div>
      <div class="column small-12 large-3 image">
        <img src="/assets/img/multi-language.svg" alt="Luigi - Micro Frontend Framework - Multi language ​support​" />
      </div>
    </div>
  </li>
</ul>